<template>
  <view class="health-page">
    <view class="header">
      <text class="title">健康指数</text>
      <text class="subtitle">关注健康，从点滴做起</text>
    </view>
    
    <view class="health-card">
      <view class="health-overview">
        <multi-circle-progress
          :progressData="healthProgressData"
          :size="180"
          :lineWidth="10"
          :animationDuration="1000"
          labelPosition="center"
          :labelStyle="{ fontSize: '14px', color: '#333' }"
          :hoverEffect="true"
          :showDetails="true"
        />
        <view class="health-score-container">
          <text class="health-score">{{ healthIndex.total }}</text>
          <text class="health-label">健康指数</text>
        </view>
      </view>
      
      <view class="health-assessment">
        <text class="assessment-title">健康评估</text>
        <text class="assessment-rating">{{ healthAssessment.rating }}</text>
        <text class="assessment-suggestion">{{ healthAssessment.suggestion }}</text>
      </view>
    </view>
    
    <view class="action-section">
      <view class="action-title">
        <text>健康记录</text>
      </view>
      
      <view class="action-grid">
        <!-- 饮水记录 -->
        <view class="action-item" @click="navigateToDrink">
          <view class="action-icon-container water">
            <image src="/static/icons/water-drop.png" class="action-icon"></image>
          </view>
          <text class="action-name">饮水记录</text>
          <text class="action-desc">{{ healthIndex.water.amount }}ml / {{ healthIndex.water.goal }}ml</text>
        </view>
        
        <!-- 情绪记录 -->
        <view class="action-item" @click="showMoodSelector = true">
          <view class="action-icon-container mood">
            <image src="/static/icons/mood.png" class="action-icon"></image>
          </view>
          <text class="action-name">情绪记录</text>
          <text class="action-desc">{{ getMoodText(healthIndex.mood.type) }}</text>
        </view>
        
        <!-- 睡眠记录 -->
        <view class="action-item" @click="showSleepSelector = true">
          <view class="action-icon-container sleep">
            <image src="/static/icons/sleep.png" class="action-icon"></image>
          </view>
          <text class="action-name">睡眠记录</text>
          <text class="action-desc">{{ getSleepText(healthIndex.sleep.quality) }}</text>
        </view>
        
        <!-- 如厕记录 -->
        <view class="action-item" @click="recordToilet">
          <view class="action-icon-container toilet">
            <image src="/static/icons/toilet.png" class="action-icon"></image>
          </view>
          <text class="action-name">如厕记录</text>
          <text class="action-desc">今日{{ healthIndex.toilet.count }}次</text>
        </view>
      </view>
    </view>
    
    <view class="test-section">
      <button class="test-btn" @click="navigateToTest">健康指数测试</button>
      <text class="test-desc">完成测试，获取详细健康报告</text>
    </view>
    
    <view class="tips-section">
      <view class="tips-title">
        <text>健康小贴士</text>
      </view>
      <view class="tips-content">
        <text class="tip-item">· 每天饮水2000ml有助于保持身体水分平衡</text>
        <text class="tip-item">· 保持良好情绪有助于提高免疫力</text>
        <text class="tip-item">· 每天7-8小时的优质睡眠是健康的基础</text>
        <text class="tip-item">· 规律如厕是肠道健康的重要指标</text>
      </view>
    </view>
    
    <!-- 情绪选择器弹窗 -->
    <u-popup v-model:show="showMoodSelector" type="dialog">
      <view class="selector-popup">
        <mood-selector @select="handleMoodSelect" />
      </view>
    </u-popup>
    
    <!-- 睡眠选择器弹窗 -->
    <u-popup v-model:show="showSleepSelector" type="dialog">
      <view class="selector-popup">
        <sleep-selector @select="handleSleepSelect" />
      </view>
    </u-popup>
  </view>
</template>

<script>
import MultiCircleProgress from '../../components/MultiCircleProgress.vue'
import MoodSelector from '../../components/MoodSelector.vue'
import SleepSelector from '../../components/SleepSelector.vue'
import { 
  formatDate, 
  saveMoodRecord, 
  saveSleepRecord, 
  saveToiletRecord 
} from '../../utils/storage.js'
import { 
  getHealthIndexDetails, 
  getHealthIndexProgressData, 
  getHealthAssessment 
} from '../../utils/healthIndex.js'

export default {
  components: {
    MultiCircleProgress,
    MoodSelector,
    SleepSelector
  },
  data() {
    return {
      healthIndex: {
        total: 0,
        water: { score: 0, weightedScore: 0, percentage: 0, amount: 0, goal: 0 },
        mood: { score: 0, weightedScore: 0, hasRecord: false, type: null },
        sleep: { score: 0, weightedScore: 0, hasRecord: false, quality: null },
        toilet: { score: 0, weightedScore: 0, hasRecord: false, count: 0 }
      },
      healthProgressData: [],
      healthAssessment: {
        rating: '未评估',
        suggestion: '请完成健康指标记录以获取评估'
      },
      showMoodSelector: false,
      showSleepSelector: false
    }
  },
  onLoad() {
    this.loadHealthData()
  },
  onShow() {
    this.loadHealthData()
  },
  methods: {
    // 加载健康数据
    loadHealthData() {
      // 获取健康指数详情
      this.healthIndex = getHealthIndexDetails()
      
      // 获取健康指数进度数据
      this.healthProgressData = getHealthIndexProgressData()
      
      // 获取健康评估
      this.healthAssessment = getHealthAssessment(this.healthIndex.total)
    },
    
    // 获取情绪文本
    getMoodText(moodType) {
      if (!moodType) return '未记录'
      
      const moodMap = {
        'happy': '开心',
        'excited': '兴奋',
        'neutral': '一般',
        'tired': '疲惫',
        'sad': '低落'
      }
      
      return moodMap[moodType] || '未知'
    },
    
    // 获取睡眠文本
    getSleepText(sleepQuality) {
      if (!sleepQuality) return '未记录'
      
      const sleepMap = {
        'good': '很好',
        'normal': '一般',
        'bad': '很差'
      }
      
      return sleepMap[sleepQuality] || '未知'
    },
    
    // 处理情绪选择
    handleMoodSelect(mood) {
      // 关闭选择器
      this.showMoodSelector = false
      
      // 创建情绪记录
      const now = new Date()
      const moodRecord = {
        date: formatDate(now),
        time: `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`,
        type: mood
      }
      
      // 保存情绪记录
      saveMoodRecord(moodRecord)
      
      // 刷新健康数据
      this.loadHealthData()
      
      // 显示成功提示
      uni.showToast({
        title: '情绪记录成功！',
        icon: 'success'
      })
    },
    
    // 处理睡眠选择
    handleSleepSelect(quality) {
      // 关闭选择器
      this.showSleepSelector = false
      
      // 创建睡眠记录
      const now = new Date()
      const sleepRecord = {
        date: formatDate(now),
        time: `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`,
        quality: quality
      }
      
      // 保存睡眠记录
      saveSleepRecord(sleepRecord)
      
      // 刷新健康数据
      this.loadHealthData()
      
      // 显示成功提示
      uni.showToast({
        title: '睡眠记录成功！',
        icon: 'success'
      })
    },
    
    // 记录如厕
    recordToilet() {
      // 创建如厕记录
      const now = new Date()
      const toiletRecord = {
        date: formatDate(now),
        time: `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`,
        type: 'normal' // 默认为正常
      }
      
      // 保存如厕记录
      saveToiletRecord(toiletRecord)
      
      // 刷新健康数据
      this.loadHealthData()
      
      // 显示成功提示
      uni.showToast({
        title: '如厕记录成功！',
        icon: 'success'
      })
    },
    
    // 导航到饮水页面
    navigateToDrink() {
      uni.navigateTo({
        url: '/pages-sub/drink/index'
      })
    },
    
    // 导航到健康指数测试页面
    navigateToTest() {
      uni.navigateTo({
        url: '/pages/test/healthIndex'
      })
    }
  }
}
</script>

<style>
.health-page {
  padding: 20px;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.subtitle {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
  display: block;
}

.health-card {
  background-color: #fff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.health-overview {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.health-score-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.health-score {
  font-size: 36px;
  font-weight: bold;
  color: #333;
}

.health-label {
  font-size: 14px;
  color: #666;
  display: block;
}

.health-assessment {
  text-align: center;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.assessment-title {
  font-size: 16px;
  color: #666;
  margin-bottom: 5px;
  display: block;
}

.assessment-rating {
  font-size: 20px;
  font-weight: bold;
  color: #f4c242;
  margin-bottom: 5px;
  display: block;
}

.assessment-suggestion {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.action-section {
  background-color: #fff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.action-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.action-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.action-item {
  width: 48%;
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.action-icon-container {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.action-icon-container.water {
  background-color: rgba(76, 175, 80, 0.1);
}

.action-icon-container.mood {
  background-color: rgba(255, 152, 0, 0.1);
}

.action-icon-container.sleep {
  background-color: rgba(33, 150, 243, 0.1);
}

.action-icon-container.toilet {
  background-color: rgba(156, 39, 176, 0.1);
}

.action-icon {
  width: 30px;
  height: 30px;
}

.action-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.action-desc {
  font-size: 12px;
  color: #666;
}

.test-section {
  background-color: #fff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.test-btn {
  background-color: #f4c242;
  color: #fff;
  font-size: 16px;
  padding: 10px 30px;
  border-radius: 25px;
  margin-bottom: 10px;
}

.test-desc {
  font-size: 12px;
  color: #666;
}

.tips-section {
  background-color: #fff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.tips-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.tips-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tip-item {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.selector-popup {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}
</style>